<!--
 * @Author: 白印潇 bai_yinxiao@163.com
 * @Date: 2023-03-09 16:01:12
 * @LastEditors: 白印潇 bai_yinxiao@163.com
 * @LastEditTime: 2023-03-20 15:32:34
 * @FilePath: /shortRent-ui/src/views/system/tenant/components/addPackage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog title="违章征信配置" :visible.sync="visible" @close="close" width="60%">
    <div>
      <el-form :model="formData" ref="creditForm" :rules="rules" label-width="100px" :inline="false" size="normal">
        <!-- 违章查询价格 -->
<!--        <template>
          <div class="subTitle">
            <span>违章查询价格</span>
            &lt;!&ndash;            <el-switch v-model="formData.electronicContractEnable" active-color="#13ce66" inactive-color="#ff4949"></el-switch>&ndash;&gt;
          </div>
          <el-row :gutter="20">
            <el-col :span="24" :offset="0">
              <el-form-item label="查询价格:" prop="illegalQueryPrice">
                <el-input style="width: 300px;" v-model="formData.illegalQueryPrice" placeholder="请输入价格">
                  <template slot="append">元/次</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </template>-->

        <!-- 违章查询价格 -->
        <template>
          <div class="subTitle">征信查询包</div>
          <el-row>
            <!-- 选择征信包 -->
            <el-col :span="24">
              <el-form-item label="选择征信包" prop="creditQueryRuleIds">
                <el-checkbox-group v-model="formData.creditQueryRuleIds" size="medium">
                  <el-row :gutter="20">
                    <el-checkbox v-for="(item) in creditPackages" :key="item.id" border :label="item.id">
                      <el-col :span="12">
                        <div>
                          <p>
                            <span style="font-size: 18px;font-weight: bold;">{{ item.name }}</span>
                            <span style="margin: 0 15px;">{{ item.type == 1 ? '企业' : '个人' }}</span>
                            <span style="margin-left: 30px;">{{ item.price }}元/次</span>
                          </p>
                          <p class="desc">{{ item.remark }}</p>
                        </div>
                      </el-col>
                    </el-checkbox>
                  </el-row>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
        </template>

        <!-- 电子合同 -->
        <template>
          <div class="subTitle packageBox">
            <span>电子合同</span>
            <el-switch v-model="formData.electronicContractEnable" active-color="#13ce66" inactive-color="#ff4949" inactive-text="关" active-text="开" :active-value="1"
                       :inactive-value="0"></el-switch>
          </div>
        </template>

      </el-form>
    </div>

    <span slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>

    </span>
  </el-dialog>
</template>
<script>
import * as creditApi from '@/api/credit/credit';
import {illegalQueryPriceDetail} from "@/api/credit/credit";

export default {
  data() {
    return {
      visible: false,
      creditPackages: [],//征信包数据源
      selectedCreditPackages: [],//选中的征信包
      formData: {
        tenantId: '',
        creditQueryRuleIds: [],
        illegalQueryPrice: '',
        electronicContractEnable: 0

      },
      //校验规则
      rules: {
        illegalQueryPrice: [
          {required: true, message: '请输入查询单价', trigger: 'change'},
          {
            pattern: /^[+-]?(\d+([.]\d*)?([eE][+-]?\d+)?|[.]\d+([eE][+-]?\d+)?)$/,
            message: "格式不正确,请输入正整数或者,最多两位的浮点数",
            trigger: "blur",
          },
        ],
        creditQueryRuleIds: [
          {type: 'array', required: true, message: '请至少选择一个查询包', trigger: 'change'}
        ]
      },
    }
  },

  created() {
    this.getAllCreditPackage();
  },
  methods: {
    // 获取平台所有的征信查询包
    getAllCreditPackage() {
      creditApi.getCreditAllPackage().then(res => {
        this.creditPackages = res.data;
      })
    },
    // 获取租户征信包
    getTenantCreditPackage() {
      creditApi.tenantCreditPackage(this.formData.tenantId).then(res => {
        const tenantCreditPackages = res.data || [];
        if (tenantCreditPackages.length > 0) {
          tenantCreditPackages.forEach((item) => {
            this.formData.creditQueryRuleIds.push(item.id);
          })
        }
      })
    },
    //违章单价配置详情
    illegalQueryPriceDetail(){
        creditApi.illegalQueryPriceDetail(this.formData.tenantId).then(res=>{
          this.formData.electronicContractEnable = res.data.electronicContractEnable;
        })
    },
    // 确定按钮
    onSubmit() {

      this.$refs.creditForm.validate((valid) => {
        if (valid) {
          this.$confirm('确定配置吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            this.formData.illegalQueryPrice=0;
            let data = JSON.stringify(this.formData);
            creditApi.configCreditPackage(data).then(res => {
              if (res.code == 200) {
                this.$emit('success');
                this.close();
                this.$message({
                  type: 'success',
                  message: '配置成功!'
                });
              }
            })

          })
        }
      });
    },

    show(tenantId, illegalQueryPrice) {
      this.visible = true;
      // 防止数据缓存,先重置表单
      this.formData.creditQueryRuleIds = [];
      this.formData.tenantId = tenantId;
      this.formData.illegalQueryPrice = illegalQueryPrice;
      this.getTenantCreditPackage();
      this.illegalQueryPriceDetail();
    },
    close() {
      this.visible = false;
    }
  },
}
</script>
<style scoped>
.subTitle {
  color: #333;
  font-size: 15px;
  font-weight: bold;
  margin: 15px 0;

  /* &::before {
    position: relative;
    top: 4px;
    display: inline-block;
    margin-right: 5px;
    content: '';
    width: 5px;
    height: 20px;
    background: #5c79e9;
  } */
}

.packageBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

/deep/ .el-checkbox.is-bordered.el-checkbox--medium {
  height: 150px;
  width: 400px;
  margin-bottom: 15px;
}

/deep/ .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__inner {
  position: absolute;
  top: -120px;

}

/deep/ .el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin-left: 0px;
}

.desc {
  white-space: pre-wrap;
  width: 350px;
  height: 80px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
</style>
